<template>
  <div class="ai-login">
    <!-- 导航栏 -->
    <van-nav-bar
      title="🤖 AI智能家教登录"
      left-arrow
      @click-left="goBack"
      class="nav-bar"
    />

    <div class="login-container">
      <!-- 背景装饰 -->
      <div class="login-background"></div>
      
      <!-- 主要内容 -->
      <div class="login-content">
        <!-- Logo和标题 -->
        <div class="login-header">
          <div class="logo">
            <div class="logo-icon">🎓</div>
          </div>
          <h1>智慧家教AI助手</h1>
          <p>专业的AI语音家教服务平台</p>
        </div>

        <!-- 登录表单卡片 -->
        <div class="login-card">
          <!-- 登录方式切换 -->
          <div class="login-switch">
            <van-button
              :type="loginType === 'password' ? 'primary' : 'default'"
              size="large"
              round
              @click="switchLoginType('password')"
              class="switch-btn"
            >
              🔐 密码登录
            </van-button>
            <van-button
              :type="loginType === 'phone' ? 'primary' : 'default'"
              size="large"
              round
              @click="switchLoginType('phone')"
              class="switch-btn"
            >
              📱 验证码登录
            </van-button>
          </div>

          <!-- 用户名密码登录 -->
          <van-form v-if="loginType === 'password'" @submit="passwordLogin" class="login-form">
            <van-cell-group inset>
              <van-field
                v-model="passwordForm.username"
                name="username"
                label="👤"
                placeholder="请输入用户名"
                :rules="[{ required: true, message: '请输入用户名' }]"
                clearable
              />
              <van-field
                v-model="passwordForm.password"
                type="password"
                name="password"
                label="🔒"
                placeholder="请输入密码"
                :rules="[{ required: true, message: '请输入密码' }]"
                clearable
              />
            </van-cell-group>
            
            <div class="form-actions">
              <van-button
                round
                block
                type="primary"
                native-type="submit"
                :loading="loading"
                class="login-btn"
              >
                <span v-if="loading">登录中...</span>
                <span v-else>🚀 立即登录</span>
              </van-button>
            </div>
          </van-form>

          <!-- 手机验证码登录 -->
          <van-form v-else @submit="phoneLogin" class="login-form">
            <van-cell-group inset>
              <van-field
                v-model="phoneForm.phone"
                name="phone"
                label="📱"
                placeholder="请输入手机号"
                :rules="[
                  { required: true, message: '请输入手机号' },
                  { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
                ]"
                clearable
              />
              <van-field
                v-model="phoneForm.code"
                name="code"
                label="🔢"
                placeholder="请输入验证码"
                :rules="[{ required: true, message: '请输入验证码' }]"
                clearable
              >
                <template #button>
                  <van-button
                    size="small"
                    type="primary"
                    :disabled="codeCountdown > 0 || codeLoading"
                    @click="sendCode"
                    :class="['code-btn', { 'countdown-active': codeCountdown > 0 }]"
                  >
                    <span v-if="codeCountdown > 0" class="countdown-content">
                      <span class="countdown-number">{{ codeCountdown }}</span>
                      <span class="countdown-text">s后重发</span>
                    </span>
                    <span v-else>获取验证码</span>
                  </van-button>
                </template>
              </van-field>
            </van-cell-group>
            
            <div class="form-actions">
              <van-button
                round
                block
                type="primary"
                native-type="submit"
                :loading="loading"
                class="login-btn"
              >
                <span v-if="loading">登录中...</span>
                <span v-else>🎯 验证码登录</span>
              </van-button>
            </div>
          </van-form>

          <!-- 错误提示 -->
          <div v-if="error" class="error-message">
            <van-notice-bar
              type="danger"
              :text="error"
              left-icon="warning-o"
              :scrollable="false"
            />
          </div>

          <!-- 底部操作 -->
          <div class="login-footer">
            <van-button plain hairline size="small" @click="goFaceLogin">
              😊 使用人脸登录
            </van-button>
            <van-button plain hairline size="small" @click="showRegister = true">
              ✨ 还没有账号？立即注册
            </van-button>
            <van-button plain hairline size="small" @click="forgotPassword">
              🔄 忘记密码？
            </van-button>
          </div>
        </div>

        <!-- 快速体验按钮 -->
        <div class="quick-actions">
          <van-button
            type="success"
            size="large"
            round
            @click="guestLogin"
            class="guest-btn"
          >
            🎮 游客体验（无需注册）
          </van-button>
        </div>
      </div>
    </div>

    <!-- 注册弹窗 -->
    <van-popup v-model:show="showRegister" position="bottom" round class="register-popup">
      <div class="register-container">
        <div class="register-header">
          <h3>🎓 用户注册</h3>
          <p>加入AI智能家教大家庭</p>
        </div>
        
        <van-form @submit="register" class="register-form">
          <van-cell-group inset>
            <van-field
              v-model="registerForm.username"
              name="username"
              label="👤"
              placeholder="请输入用户名"
              :rules="[{ required: true, message: '请输入用户名' }]"
              clearable
            />
            <van-field
              v-model="registerForm.password"
              type="password"
              name="password"
              label="🔒"
              placeholder="请输入密码（6位以上）"
              :rules="[
                { required: true, message: '请输入密码' },
                { validator: (val: string) => val.length >= 6 || '密码长度不能少于6位' }
              ]"
              clearable
            />
            <van-field
              v-model="registerForm.confirmPassword"
              type="password"
              name="confirmPassword"
              label="🔐"
              placeholder="请确认密码"
              :rules="[
                { required: true, message: '请确认密码' },
                { validator: validateConfirmPassword }
              ]"
              clearable
            />
            <van-field
              v-model="registerForm.nickname"
              name="nickname"
              label="🌟"
              placeholder="请输入昵称"
              :rules="[{ required: true, message: '请输入昵称' }]"
              clearable
            />
            <van-field
              v-model="registerForm.phone"
              name="phone"
              label="📱"
              placeholder="请输入手机号（可选）"
              :rules="[
                { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
              ]"
              clearable
            />
          </van-cell-group>
          
          <div class="register-actions">
            <van-button
              round
              block
              type="primary"
              native-type="submit"
              :loading="registerLoading"
              class="register-btn"
            >
              <span v-if="registerLoading">注册中...</span>
              <span v-else>🎯 立即注册</span>
            </van-button>
            <van-button
              round
              block
              type="default"
              @click="showRegister = false"
              class="cancel-btn"
            >
              取消
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>

    <!-- 权限提示弹窗 -->
    <van-dialog
      v-model:show="showPermissionDialog"
      title="🔐 权限说明"
      :show-cancel-button="false"
      confirm-button-text="我知道了"
    >
      <div class="permission-content">
        <p>🎓 <strong>学生权限：</strong>可以使用AI语音学习功能</p>
        <p>👨‍🏫 <strong>教师权限：</strong>可以管理学生和课程内容</p>
        <p>👑 <strong>管理员权限：</strong>系统完整管理权限</p>
        <p class="permission-note">系统将根据您的角色自动分配相应权限</p>
      </div>
    </van-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showDialog, showNotify } from 'vant'
import { authService } from '@/services/authService'
// @ts-ignore
import { setToken, setUserInfo } from '@/utils/auth'

const router = useRouter()

// 响应式数据
const loginType = ref<'password' | 'phone'>('password')
const loading = ref(false)
const codeLoading = ref(false)
const codeCountdown = ref(0)
const registerLoading = ref(false)
const error = ref('')
const showRegister = ref(false)
const showPermissionDialog = ref(false)

// 从后端用户对象推断角色（兼容无角色字段的情况）
const inferRole = (user: any): 'admin' | 'teacher' | 'student' | 'guest' => {
  try {
    if (!user) return 'student'
    if (user.role) return user.role

    const rnames: any[] = user.rnames || user.roles || []
    const hasAdmin = rnames.some((r: any) => String(r?.roleKey || r?.roleName || r).toUpperCase().includes('ADMIN'))
    const hasTeacher = rnames.some((r: any) => String(r?.roleKey || r?.roleName || r).toUpperCase().includes('TEACHER'))

    const uname = String(user.username || '').toLowerCase()
    if (hasAdmin || uname === 'admin') return 'admin'
    if (hasTeacher || uname.includes('teacher')) return 'teacher'

    return 'student'
  } catch {
    return 'student'
  }
}

// 表单数据
const passwordForm = ref({
  username: '',
  password: ''
})

const phoneForm = ref({
  phone: '',
  code: ''
})

const registerForm = ref({
  username: '',
  password: '',
  confirmPassword: '',
  nickname: '',
  phone: ''
})

// 验证码定时器
let codeTimer: number | null = null

// 返回上一页
const goBack = () => {
  router.back()
}

// 跳转人脸登录
const goFaceLogin = () => {
  router.push('/login')
}

// 切换登录方式
const switchLoginType = (type: 'password' | 'phone') => {
  loginType.value = type
  error.value = ''
  // 清空表单
  passwordForm.value = { username: '', password: '' }
  phoneForm.value = { phone: '', code: '' }
}

// 用户名密码登录
const passwordLogin = async () => {
  loading.value = true
  error.value = ''
  
  try {
    // 使用统一的认证服务
    const response = await authService.login({
      username: passwordForm.value.username,
      password: passwordForm.value.password,
      loginType: 'password'
    })
    
    if (response.code === 200) {
      const { token, user, permissions } = response.data

      // 存储认证信息（兼容旧键名 + 路由守卫所用键名）
      setToken(token)
      setUserInfo(user)
      localStorage.setItem('ai_tutor_token', token)
      localStorage.setItem('ai_tutor_user', JSON.stringify(user))
      if (permissions) {
        localStorage.setItem('ai_tutor_permissions', JSON.stringify(permissions))
      }

      // 根据用户角色显示权限提示
      const role = inferRole(user)
      showPermissionInfo(role)

      // 直接跳转，不显示欢迎信息
      router.push('/home')
    } else {
      error.value = response.message || '登录失败'
    }
  } catch (err: any) {
    console.error('登录错误:', err)
    if (err.message?.includes('401') || err.message?.includes('Unauthorized')) {
      error.value = '用户名或密码错误'
    } else if (err.message?.includes('403') || err.message?.includes('Forbidden')) {
      error.value = '账号已被禁用，请联系管理员'
    } else {
      error.value = err.message || '网络错误，请稍后重试'
    }
  } finally {
    loading.value = false
  }
}

// 手机验证码登录
const phoneLogin = async () => {
  loading.value = true
  error.value = ''
  
  try {
    const response = await authService.phoneLogin({
      phonenumber: phoneForm.value.phone,
      code: phoneForm.value.code,
      loginType: 'phone'
    })
    
    if (response.code === 200) {
      const { token, user, permissions } = response.data

      // 存储认证信息（兼容旧键名 + 路由守卫所用键名）
      setToken(token)
      setUserInfo(user)
      localStorage.setItem('ai_tutor_token', token)
      localStorage.setItem('ai_tutor_user', JSON.stringify(user))
      if (permissions) {
        localStorage.setItem('ai_tutor_permissions', JSON.stringify(permissions))
      }

      const role = inferRole(user)
      showPermissionInfo(role)

      // 直接跳转，不显示欢迎信息
      router.push('/home')
    } else {
      error.value = response.message || '验证码登录失败'
    }
  } catch (err: any) {
    console.error('验证码登录错误:', err)
    if (err.message?.includes('400') || err.message?.includes('Bad Request')) {
      error.value = '验证码错误或已过期'
    } else {
      error.value = err.message || '网络错误，请稍后重试'
    }
  } finally {
    loading.value = false
  }
}

// 发送验证码
const sendCode = async () => {
  if (!phoneForm.value.phone || !/^1[3-9]\d{9}$/.test(phoneForm.value.phone)) {
    showToast('请输入正确的手机号')
    return
  }
  
  codeLoading.value = true
  
  try {
    const response = await authService.sendCode(phoneForm.value.phone)
    
    if (response.code === 200) {
      showToast({
        type: 'success',
        message: '验证码已发送，请查收'
      })
      
      // 开始倒计时
      codeCountdown.value = 60
      codeTimer = setInterval(() => {
        codeCountdown.value--
        if (codeCountdown.value <= 0) {
          clearInterval(codeTimer!)
          codeTimer = null
        }
      }, 1000)
    } else {
      showToast({
        type: 'fail',
        message: response.message || '验证码发送失败'
      })
    }
  } catch (err) {
    console.error('发送验证码错误:', err)
    showToast({
      type: 'fail',
      message: '网络错误，验证码发送失败'
    })
  } finally {
    codeLoading.value = false
  }
}

// 注册
const register = async () => {
  registerLoading.value = true
  
  try {
    const { confirmPassword, ...submitData } = registerForm.value
    const response = await authService.register({
      ...submitData,
      role: 'student' // 默认注册为学生角色
    })
    
    if (response.code === 200) {
      showNotify({
        type: 'success',
        message: '注册成功！请登录'
      })
      
      showRegister.value = false
      
      // 自动填入用户名
      passwordForm.value.username = registerForm.value.username
      loginType.value = 'password'
      
      // 清空注册表单
      registerForm.value = {
        username: '',
        password: '',
        confirmPassword: '',
        nickname: '',
        phone: ''
      }
    } else {
      showToast({
        type: 'fail',
        message: response.message || '注册失败'
      })
    }
  } catch (err: any) {
    console.error('注册错误:', err)
    if (err.message?.includes('409') || err.message?.includes('Conflict')) {
      showToast({
        type: 'fail',
        message: '用户名已存在，请更换用户名'
      })
    } else {
      showToast({
        type: 'fail',
        message: err.message || '注册失败，请稍后重试'
      })
    }
  } finally {
    registerLoading.value = false
  }
}

// 游客登录
const guestLogin = async () => {
  loading.value = true
  
  try {
    // 生成游客ID
    const guestId = `guest_${Date.now()}`
    const guestUser = {
      id: guestId,
      username: guestId,
      nickname: '游客用户',
      role: 'guest',
      avatar: '🎮'
    }
    
    const guestToken = `guest_token_${guestId}`
    const guestPermissions = ['voice_call'] // 游客只能使用语音通话功能
    
    // 存储游客信息
    localStorage.setItem('ai_tutor_token', guestToken)
    localStorage.setItem('ai_tutor_user', JSON.stringify(guestUser))
    localStorage.setItem('ai_tutor_permissions', JSON.stringify(guestPermissions))
    
    showNotify({
      type: 'success',
      message: '欢迎体验AI智能家教！'
    })
    
    setTimeout(() => {
      router.push('/home')
    }, 1000)
  } catch (err) {
    console.error('游客登录错误:', err)
    showToast({
      type: 'fail',
      message: '体验模式启动失败'
    })
  } finally {
    loading.value = false
  }
}

// 忘记密码
const forgotPassword = () => {
  showDialog({
    title: '🔄 密码重置',
    message: '请联系管理员重置密码，或使用手机验证码登录',
    confirmButtonText: '使用验证码登录',
    cancelButtonText: '知道了'
  }).then(() => {
    switchLoginType('phone')
  }).catch(() => {
    // 用户取消
  })
}

// 显示权限信息
const showPermissionInfo = (role: string) => {
  const roleNames = {
    'student': '学生',
    'teacher': '教师',
    'admin': '管理员',
    'guest': '游客'
  }
  
  showNotify({
    type: 'primary',
    message: `您的身份：${roleNames[role as keyof typeof roleNames] || '用户'}`
  })
  
  if (role !== 'guest') {
    setTimeout(() => {
      showPermissionDialog.value = true
    }, 2000)
  }
}

// 确认密码验证
const validateConfirmPassword = (value: string) => {
  if (value !== registerForm.value.password) {
    return '两次输入密码不一致'
  }
  return true
}

// 组件初始化，不再检查登录状态
onMounted(() => {
  // 不再自动检测登录状态，让用户手动选择登录方式
})

// 组件卸载时清理
import { onUnmounted } from 'vue'
onUnmounted(() => {
  if (codeTimer) {
    clearInterval(codeTimer)
  }
})
</script>

<style lang="less" scoped>
.ai-login {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  .nav-bar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
  }
  
  .login-container {
    position: relative;
    min-height: calc(100vh - 46px);
    overflow: hidden;
  }
  
  .login-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
      animation: float 20s ease-in-out infinite;
    }
  }
  
  .login-content {
    position: relative;
    z-index: 10;
    padding: 40px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh - 46px);
  }
  
  .login-header {
    text-align: center;
    margin-bottom: 40px;
    color: white;
    
    .logo {
      margin-bottom: 20px;
      
      .logo-icon {
        font-size: 64px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        width: 120px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        animation: logoFloat 3s ease-in-out infinite;
      }
    }
    
    h1 {
      font-size: 28px;
      margin: 0 0 12px 0;
      font-weight: 600;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    p {
      font-size: 16px;
      margin: 0;
      opacity: 0.9;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
  }
  
  .login-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    padding: 32px 24px;
    width: 100%;
    max-width: 400px;
    backdrop-filter: blur(20px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
    
    .login-switch {
      display: flex;
      gap: 12px;
      margin-bottom: 24px;
      
      .switch-btn {
        flex: 1;
        font-weight: 500;
        border-radius: 20px;
        transition: all 0.3s ease;
        
        &.van-button--primary {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border: none;
          box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }
        
        &.van-button--default {
          background: #f8f9fa;
          color: #666;
          border: 1px solid #e9ecef;
        }
      }
    }
    
    .login-form {
      .van-cell-group {
        margin-bottom: 20px;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        
        .van-field {
          padding: 16px;
          
          .van-field__label {
            font-size: 18px;
            margin-right: 12px;
          }
          
          .van-field__control {
            font-size: 16px;
          }
          
          // 为包含按钮的输入框添加特殊样式
          &[name="code"] {
            .van-field__control {
              padding-right: 12px;
            }
          }
        }
        
        .code-btn {
          background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
          border: none;
          border-radius: 24px;
          color: white;
          font-weight: 600;
          padding: 8px 16px;
          min-width: 100px;
          font-size: 14px;
          box-shadow: 0 8px 25px rgba(82, 196, 26, 0.35);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          position: relative;
          overflow: hidden;
          margin-left: 8px;
          
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
          }
          
          &:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(82, 196, 26, 0.45);
            
            &::before {
              left: 100%;
            }
          }
          
          &:active:not(:disabled) {
            transform: translateY(0);
            box-shadow: 0 6px 20px rgba(82, 196, 26, 0.35);
          }
          
          &.countdown-active {
            background: linear-gradient(135deg, #ff7875 0%, #ff9c6e 100%);
            box-shadow: 0 8px 25px rgba(255, 120, 117, 0.35);
            
            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 12px 30px rgba(255, 120, 117, 0.45);
            }
          }
          
          &:disabled {
            background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
            color: #999;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transform: none;
            cursor: not-allowed;
            
            &:hover {
              transform: none;
              box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            }
          }
          
          .countdown-content {
            display: flex;
            align-items: center;
            gap: 2px;
          }
          
          .countdown-number {
            font-weight: 700;
            font-size: 16px;
            animation: pulse 1s ease-in-out infinite;
            min-width: 20px;
            text-align: center;
          }
          
          .countdown-text {
            font-size: 12px;
            opacity: 0.9;
          }
        }
        
        @keyframes pulse {
          0%, 100% {
            transform: scale(1);
          }
          50% {
            transform: scale(1.1);
          }
        }
      }
      
      .form-actions {
        .login-btn {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border: none;
          border-radius: 25px;
          font-size: 18px;
          font-weight: 600;
          height: 50px;
          box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          position: relative;
          overflow: hidden;
          
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
          }
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(102, 126, 234, 0.5);
            
            &::before {
              left: 100%;
            }
          }
          
          &:active {
            transform: translateY(0);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
          }
        }
      }
    }
    
    .error-message {
      margin: 16px 0;
      
      .van-notice-bar {
        border-radius: 12px;
        font-size: 14px;
      }
    }
    
    .login-footer {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      
      .van-button {
        color: #667eea;
        font-size: 13px;
        padding: 4px 8px;
        
        &:active {
          background-color: rgba(102, 126, 234, 0.1);
        }
      }
    }
  }
  
  .quick-actions {
    width: 100%;
    max-width: 400px;
    
    .guest-btn {
      background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
      border: none;
      border-radius: 24px;
      font-size: 16px;
      font-weight: 600;
      height: 48px;
      box-shadow: 0 8px 25px rgba(82, 196, 26, 0.35);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
      }
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(82, 196, 26, 0.45);
        
        &::before {
          left: 100%;
        }
      }
      
      &:active {
        transform: translateY(0);
        box-shadow: 0 6px 20px rgba(82, 196, 26, 0.35);
      }
    }
  }
}

.register-popup {
  .register-container {
    padding: 32px 24px;
    max-height: 70vh;
    overflow-y: auto;
    
    .register-header {
      text-align: center;
      margin-bottom: 24px;
      
      h3 {
        font-size: 22px;
        margin: 0 0 8px 0;
        color: #333;
      }
      
      p {
        font-size: 14px;
        color: #666;
        margin: 0;
      }
    }
    
    .register-form {
      .van-cell-group {
        margin-bottom: 20px;
        border-radius: 16px;
        overflow: hidden;
        
        .van-field {
          padding: 14px 16px;
          
          .van-field__label {
            font-size: 16px;
            margin-right: 10px;
          }
        }
      }
      
      .register-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        
        .register-btn {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border: none;
          font-size: 16px;
          font-weight: 600;
          height: 48px;
          box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }
        
        .cancel-btn {
          height: 44px;
          font-size: 15px;
          color: #666;
          border-color: #ddd;
        }
      }
    }
  }
}

.permission-content {
  padding: 16px 0;
  
  p {
    margin: 12px 0;
    font-size: 14px;
    line-height: 1.5;
    
    strong {
      color: #333;
    }
    
    &.permission-note {
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid #f0f0f0;
      color: #999;
      font-size: 13px;
      text-align: center;
    }
  }
}

// 响应式设计
@media (max-width: 480px) {
  .ai-login {
    .login-content {
      padding: 20px 16px;
    }
    
    .login-header {
      margin-bottom: 30px;
      
      .logo .logo-icon {
        width: 80px;
        height: 80px;
        font-size: 48px;
      }
      
      h1 {
        font-size: 24px;
      }
      
      p {
        font-size: 14px;
      }
    }
    
    .login-card {
      padding: 24px 20px;
      border-radius: 20px;
      
      .login-switch {
        .switch-btn {
          font-size: 14px;
          padding: 8px 12px;
        }
      }
    }
  }
  
  .register-popup {
    .register-container {
      padding: 24px 20px;
    }
  }
}

// 动画效果
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(1deg); }
  66% { transform: translateY(-10px) rotate(-1deg); }
}

// 深色模式适配
@media (prefers-color-scheme: dark) {
  .ai-login {
    .login-card {
      background: rgba(30, 30, 30, 0.95);
      color: #fff;
      
      .van-field {
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
      }
    }
  }
}
</style>